<script setup lang="ts">
defineProps<{
  totalArticles: number;
  totalCategories: number;
  totalViews: number;
}>();
</script>

<template>
  <div class="stats-card">
    <div class="side-header">数据统计</div>
    <div class="stats-list">
      <div class="stat-item">
        <div class="stat-icon">📚</div>
        <div class="stat-info">
          <div class="stat-value">{{ totalArticles }}</div>
          <div class="stat-label">文章总数</div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-icon">📂</div>
        <div class="stat-info">
          <div class="stat-value">{{ totalCategories }}</div>
          <div class="stat-label">文章分类</div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-icon">🔥</div>
        <div class="stat-info">
          <div class="stat-value">{{ totalViews.toLocaleString() }}</div>
          <div class="stat-label">总阅读量</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.stats-card {
  margin-bottom: 24px; // 保持卡片间距
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

  .side-header {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaecef;
  }

  .stats-list {
    .stat-item {
      display: flex;
      align-items: center;
      padding: 12px;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(96, 165, 250, 0.08);
        transform: translateY(-4px);
      }

      .stat-icon {
        font-size: 20px;
        margin-right: 12px;
        opacity: 0.8;
      }

      .stat-info {
        flex: 1;

        .stat-value {
          font-size: 18px;
          font-weight: 600;
          color: #2c3e50;
          line-height: 1.2;
        }

        .stat-label {
          font-size: 13px;
          color: #6b7280;
          margin-top: 2px;
        }
      }
    }
  }
}
</style>
